<template>
	<div>
		<mainTop></mainTop>
		<div class="cpxqMiddleBox">
			<div class="cpxq">
				<div style="width: 100%;height: 400px;">
					<div style="display: inline-block;width: 585px;height: 400px;float: left;">
						<img :src="'https://zha.heavenk.com/prod-api'+ this.product.rows[0].exhibitionproductspic" alt="" style="width: 100%;height: 100%;">
					</div>
					<div style="width: 500px;color: #150e52;float: left;padding: 20px 0px;
						padding-left: 38px;padding-right: 17px;">
						<div style="font-size: 18px;">
							<div style="font-weight: 600;">
								{{ this.product.rows[0].product }}
							</div>
							<div style="width: 100%;height: 40px;    margin-top: 12px;">
								<div style="float: left;margin-right: 20px;">
									零售价：<span style="font-size: 30px;font-weight: 600;">{{ this.product.rows[0].productprice }}</span>/件
								</div>
								<!-- <div style="float: left;">
									经销价：<span style="font-size: 30px;font-weight: 600;"></span> 
								</div> -->
							</div>
							 <div style="line-height: 42px;margin-top: 42px;">
								 <div><span style="font-weight: 600;">产&nbsp;&nbsp;&nbsp;区&nbsp;&nbsp;&nbsp;&nbsp;：</span>{{ this.product.rows[0].area?this.product.rows[0].area:'中国' }} </div>
								 <div><span style="font-weight: 600;">年&nbsp;&nbsp;&nbsp;份&nbsp;&nbsp;&nbsp;&nbsp;：</span>{{ this.product.rows[0].year?this.product.rows[0].year:'2020' }}</div>
								 <div><span style="font-weight: 600;">容&nbsp;&nbsp;&nbsp;量&nbsp;&nbsp;&nbsp;&nbsp;：</span>{{ this.product.rows[0].capacity?this.product.rows[0].capacity:'300ml' }} </div>
								 <div><span style="font-weight: 600;">是否进口：</span>{{ this.product.rows[0].country?this.product.rows[0].country:'是' }} </div>
								 <div><span style="font-weight: 600;">产品类型：</span>枸杞 </div>
								 <div><span style="font-weight: 600;">更新时间：</span>{{ this.product.rows[0].time?this.product.rows[0].time:'2022-08-09' }} </div>
							 </div>
						</div>
					</div>
				</div>
				<div class="cpjs" style="margin-top: 40px;font-family: PingFangSC-Semibold, sans-serif;">
					<div style="color: #150e52; font-size: 20px; font-weight: 600;border-bottom: 2px solid #dddde4;padding: 10px 0px;">产品介绍：</div>
					<div style="color: #150e52; font-size: 16px;line-height: 45px;min-height: 300px;padding: 6px 0px;" v-html="this.product.rows[0].productintroduction" >
					</div>
				</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			 		product:'',
					type:'',
					id:''
			   };
			},

		created(){
			this.getType();
		},
		methods:{
			getProduct(id){
				axios.get('https://zha.heavenk.com/prod-api/web/two/product/'+id).then((res)=>{
                    this.product=res.data
                })
			},
			getType(){
				axios.get('https://zha.heavenk.com/prod-api/system/dict/data/type/type').then((res)=>{
                    this.type=res.data
                })
			},
		},
		mounted(){
			if (localStorage.getItem('id')){
			      this.id= localStorage.getItem('id');
			      localStorage.clear();
			};
			console.log(this.id)
			this.getProduct(this.$route.query.id);
			// console.log('Receive id',id);
		}
		}
</script>

<style>
	.cpxqMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f6f6f6;
	}
	.cpxq{
		width: 1140px;
		min-width: 1140px;
		height: auto;
		margin: auto;
		margin-top: 55px;
	}
</style>